<template>
  <!--Vue3组件中的模板结构可以没有根标签-->
  <h1>我是App组件</h1>
  <h2>姓名{{ name }}</h2>
  <h2>年龄{{ age }}</h2>
  <h2>{{ job.type }}</h2>
  <h2>{{ job.salary }}</h2>
  <button @click="changeInfo">修改信息</button>
</template>

<script>
import {ref} from 'vue';

export default {
  name: 'App',
  setup() {
    // 响应式数据 本质是个RefImpl对象(引用对象)
    let name = ref('张三');
    let age = ref(18);
    let job = ref({
      type: '前端',
      salary: '30k'
    });

    function changeInfo() {
      // name.value = '李四';
      // age.value = 26;
      job.value.type = 'Java工程师';
      job.value.salary = '40k';
      console.log(job.value);
    }

    // 返回一个对象
    return {
      name,
      age,
      changeInfo,
      job
    };
  }
}
</script>

<style>
</style>
